<template>
  <div class="agents-settings">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>智能体设置</span>
          <el-button type="primary" @click="handleAddAgent">添加智能体</el-button>
        </div>
      </template>
      <el-table :data="agents" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="name" label="智能体名称" />
        <el-table-column prop="identifier" label="标识" />
        <el-table-column prop="description" label="描述" show-overflow-tooltip />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
      <AgentDetail v-model="agentForm" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { useAgentsStore } from '@/store/agents';
import type { Agent } from '@/store/agents';
import AgentDetail from './AgentDetail.vue';

export default defineComponent({
  name: 'AgentsSettings',
  components: {
    AgentDetail
  },
  setup() {
    const agentsStore = useAgentsStore();
    const dialogVisible = ref(false);
    const dialogTitle = ref('添加智能体');
    const agents = ref<Agent[]>([]);

    const agentForm = reactive<Agent>({
      id: '',
      name: '',
      identifier: '',
      modelUsage: 'fixed',
      fixedModel: '',
      streamOutput: false,
      backgroundPrompt: '',
      welcomeMessage: 'show',
      promptContent: '',
      scenePrompt: '',
      fileUpload: false,
      referencedFunctions: [],
      recommendedPrompts: [],
      vectorStores: [],
      status: 'active'
    });

    const handleAddAgent = () => {
      dialogTitle.value = '添加智能体';
      Object.assign(agentForm, {
        id: '',
        name: '',
        identifier: '',
        modelUsage: 'fixed',
        fixedModel: '',
        streamOutput: false,
        backgroundPrompt: '',
        welcomeMessage: 'show',
        promptContent: '',
        scenePrompt: '',
        fileUpload: false,
        referencedFunctions: [],
        recommendedPrompts: [],
        vectorStores: [],
        status: 'active'
      });
      dialogVisible.value = true;
    };

    const handleEdit = (row: Agent) => {
      dialogTitle.value = '编辑智能体';
      Object.assign(agentForm, {
        id: row.id,
        name: row.name,
        identifier: row.identifier,
        modelUsage: row.modelUsage,
        fixedModel: row.fixedModel,
        streamOutput: row.streamOutput,
        backgroundPrompt: row.backgroundPrompt,
        welcomeMessage: row.welcomeMessage,
        promptContent: row.promptContent,
        scenePrompt: row.scenePrompt,
        fileUpload: row.fileUpload,
        referencedFunctions: row.referencedFunctions,
        recommendedPrompts: row.recommendedPrompts,
        vectorStores: row.vectorStores,
        status: row.status
      });
      dialogVisible.value = true;
    };

    const handleDelete = async (row: any) => {
      await agentsStore.deleteAgent(row.id);
      await fetchAgents();
    };

    const handleSave = async () => {
      if (agentForm.id) {
        await agentsStore.updateAgent(agentForm);
      } else {
        await agentsStore.createAgent(agentForm);
      }
      dialogVisible.value = false;
      await fetchAgents();
    };

    const fetchAgents = async () => {
      agents.value = await agentsStore.fetchAgents();
    };

    fetchAgents();

    return {
      dialogVisible,
      dialogTitle,
      agents,
      agentForm,
      handleAddAgent,
      handleEdit,
      handleDelete,
      handleSave
    };
  }
});
</script>

<style lang="scss" scoped>
.agents-settings {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>